<script setup>
const props = defineProps({
  href: {
    type: String,
    required: true
  },
  icon: {
    type: Object,
    required: false
  },
  class: {
    type: String,
    default: ''
  }
})
</script>

<template>
  <li :class="['flex', props.class].filter(Boolean)">
    <a
      :href="href"
      class="group flex text-sm font-medium text-zinc-800 transition hover:text-primary-600 dark:text-zinc-200 dark:hover:text-primary-500"
    >
      <component v-if="icon" :is="icon" class="h-6 w-6 flex-none fill-zinc-500 transition group-hover:fill-primary-500" />
      <span class="ml-4"><slot /></span>
    </a>
  </li>
</template>
